<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<link rel="stylesheet" href="ui-themes/smoothness/jquery-ui-1.10.0.custom.css" type="text/css" />
		<link rel="stylesheet" href="css/08.css" />
		<script type="text/javascript" src="js/jquery.js"></script>
		<script type="text/javascript" src="js/jquery-ui-1.10.0.custom.min.js"></script>
		<script type="text/javascript" src="js/component1.js"></script>
		<title>jQuery插件</title>

		<script type="application/javascript">
			$(document).ready(function() {

				var $inventory = $("#tableId tbody");

				var quantities = $inventory.find('td:nth-child(2)').map(function(index, qty) {
					return $(qty).text();
				}).get();

				var totalPrice = $inventory.find("td:nth-child(3)").map(function(index, qwe) {
					return $(qwe).text();
				}).get();

				var sumQunantites = $.mathUtils.sum(quantities);
				var sumTotalPrice = $.mathUtils.sum(totalPrice);

				$("#sum").find('td:nth-child(2)').text(sumQunantites);
				$("#sum").find("td:nth-child(3)").text(sumTotalPrice);

				var averageQuantities = $.mathUtils.average(quantities);
				var averageTotalPrice = $.mathUtils.average(totalPrice);

				$("#average").find("td:nth-child(2)").text(averageQuantities.toFixed(2));
				$("#average").find("td:nth-child(3)").text(averageTotalPrice.toFixed(2));

				$("table").click(function() {
					$('tr').swapClass('one', 'two');
				})

				$.fn.shadow.defaults.shadowLength = 5;
				$('h1').shadow({
					copyOffest: function(index) {
						return {
							x: -index,
							y: -2 * index
						};
					}
				});
				$(".tooltip").tooltip();
			});
		</script>
	</head>

	<body>
		<h1>货物信息表</h1>
		<center>
			<table id="tableId" >
				<thead>
					<tr class="one">
						<th>产品</th>
						<th>数量</th>
						<th>价格</th>
					</tr>
				</thead>
				<tfoot>
					<tr class="two" id="sum">
						<td>总量</td>
						<td></td>
						<td></td>
					</tr>
					<tr class="two" id="average">
						<td>平均</td>
						<td></td>
						<td></td>
					</tr>
				</tfoot>
				<tbody>
					<tr>
						<td class="tooltip" data-tooltip-text="国产玉米就是好啊!">玉米</td>
						<td>4</td>
						<td>2.50</td>
					</tr>
					<tr>
						<td class="tooltip" data-tooltip-text="非转基因大豆!">大豆</td>
						<td>12</td>
						<td>4.32</td>
					</tr>
					<tr>
						<td class="tooltip" data-tooltip-text="黑土地小麦！">小麦</td>
						<td>14</td>
						<td>7.89</td>
					</tr>
				</tbody>
			</table>
		</center>
	</body>

</html>